function Header(){
	this.init();
}

Header.NavTemplate=`
	<!-- 导航栏 -->
	<div id="docNav">
		<div class="nav">
			<div class="logo">
				<img src="/images/buy.png" alt="">
				<p><a href="/">超市管理系统</a></p>
			</div>
			<ul>
				<li><a href="/html/login.html">登录</a></li>
				<li data-toggle="modal" data-target="#regModal"><a href="#">注册</a></li>
			</ul>
			<ul class="hidden login-success">
	        <li><a href="#">欢迎：</a></li>
	        <li><a href="javascript:void(0);" class="link-logout">注销</a></li>
	      	</ul>
		</div>
	</div>
	<!-- 时间条 -->
	<div id="docTimer">
		<div class="timer">
			<div class="left">
				<img src="/images/time.png" alt="">
				<span id="time"></span>
			</div>
			<p>温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</p>
		</div>
	</div>

	<div id="docLeft">
		<dl>
			<dt>功能列表</dt>
			<dd>
				<span><img src="/images/zd.png" alt=""></span>
				账单管理
			</dd>
			<dd><span><img src="/images/gys.png" alt=""></span>供应商管理</dd>
			<dd><span><img src="/images/yh.png" alt=""></span>用户管理</dd>
			<dd><span><img src="/images/mm.png" alt=""></span>密码修改</dd>
			<dd><a href="/html/login.html">
				<span><img src="/images/tc.png" alt=""></span>退出系统</a></dd>
		</dl>
	</div>
`;

$.extend(Header.prototype,{
	init(){
		this.creatDom();
		this.loadUser();
		this.addListener();
	},
	creatDom(){
		$("header").html(Header.NavTemplate);
	},
	//加载登录成功的信息
	loadUser(){
		const user=sessionStorage.username;
		if (user) { // 存在，说明有登录成功的用户
			$(".login-success").removeClass("hidden").prev("ul").remove();
			$(".login-success a:first").html("欢迎：" + user);
			$("#docContent .yonghu").text(user);
		} else { // 不存在，则加载登录、注册模态框
			this.createModal();
		}
	},
	createModal(){
		new RegisterModal();
	},
	//添加点击事件
	addListener(){
		$(".link-logout").on("click", this.logoutHandler);
		$("#docLeft dl").on("click","dd",$.proxy(this.loadInter,this));
	},
	// 注销处理
	logoutHandler() {
		sessionStorage.removeItem("username");
		$.getJSON("/api/users/logout", (data)=>{
			if(data.res_body.status === 1) {
				location.reload();
			}
		});
	},
	loadInter(event){
		var src=event.target;
		const _xb=$(src).index();
		if (_xb==1){
			$(src).addClass("color").siblings("dd").removeClass("color");
			$("#docRight").load("/html/bill.html",()=>{
				$.getScript("/js/bill/bill.js");
				// $.ajax({
				// 	url: "/js/bill/bill.js",
				// 	dataType: "script",
				// 	success: function(data){
				// 		console.log(data);
				// 	},
				// 	error: function(err) {
				// 		console.log(err)
				// 	}
				// })
			});
		}else if(_xb==2){
			$(src).addClass("color").siblings("dd").removeClass("color");
			$("#docRight").load("/html/supplier.html");
		}else if(_xb==3){
			$(src).addClass("color").siblings("dd").removeClass("color");
			$("#docRight").load("/html/user.html");
		}else{
			$(src).addClass("color").siblings("dd").removeClass("color");
			$("#docRight").load("/html/password.html");
		}
	}

});

new Header();